import { useState } from "react";

/*
  受控组件：通过 state 和 onChange 事件来收集表单数据（推荐）
*/
export default function App() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  // const handleUsernameChange = (e) => {
  //   // e.target 触发事件目标DOM元素
  //   setUsername(e.target.value);
  // };

  // const handlePasswordChange = (e) => {
  //   // e.target 触发事件目标DOM元素
  //   setPassword(e.target.value);
  // };

  // const handleChange = (type) => {
  //   return (e) => {
  //     // 内部函数才是绑定事件回调函数
  //     if (type === "username") {
  //       setUsername(e.target.value);
  //     } else if (type === "password") {
  //       setPassword(e.target.value);
  //     }
  //   };
  // };

  const handleChange = (setFn) => {
    return (e) => {
      // 内部函数才是绑定事件回调函数
      setFn(e.target.value);
    };
  };

  const login = (e) => {
    e.preventDefault();
    console.log(username, password);
  };

  return (
    <form onSubmit={login}>
      <h1>登录</h1>
      {/* 
        在原生DOM事件中：
          input元素的input事件，可以在用户输入内容触发，获取实时输入的内容
          input元素的change事件，失去焦点才会触发
      
        在React合成事件中：
          input元素的onChange事件，相当于原生DOM事件的input事件
      */}
      {/* <div>
        用户名：
        <input type="text" onChange={handleChange("username")} />
      </div>
      <div>
        密码：
        <input type="password" onChange={handleChange("password")} />
      </div> */}

      <div>
        用户名：
        <input type="text" onChange={handleChange(setUsername)} />
      </div>
      <div>
        密码：
        <input type="password" onChange={handleChange(setPassword)} />
      </div>
      <button>登录</button>
    </form>
  );
}
